<template>
  <div class="userType_PC">
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      v-loading="isLoadingTable"
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50" align="center"></el-table-column>
      <el-table-column type="index" width="40" align="center"></el-table-column>
      <el-table-column prop="username" label="用户名" align="center"></el-table-column>
      <el-table-column prop="name" label="姓名" align="center"></el-table-column>
      <el-table-column label="性别" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.sex == 'MALE' ? '男' : '女'}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="birthday" label="出生日期" align="center"></el-table-column>
      <el-table-column prop="mobilePhone" label="电话" align="center"></el-table-column>
      <el-table-column prop="email" label="邮箱" align="center"></el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.state == 'ENABLED'" style="color:green">启用</span>
          <span v-else style="color:red">禁用</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="360" align="center">
        <template slot-scope="scope">
          <el-button size="small" @click="handleViewAccount(scope.row)">查看</el-button>
          <el-button size="small" @click="handleEditeAccount(scope.row)">编辑</el-button>
          <el-button size="small" @click="handleRoleSelect(scope.row)">角色</el-button>
          <el-button
            size="small"
            v-if="scope.row.state != 'ENABLED'"
            @click="handleStartAccount(scope.row)"
          >启用</el-button>
          <el-button size="small" v-else @click="handleStopAccount(scope.row)">禁用</el-button>
          <el-button size="small" type="danger" @click="handleDeleteAccount(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pages">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="10"
        layout="prev, pager, next, jumper"
        :total="accountTotal"
      ></el-pagination>
    </div>
    <!-- 设置角色 -->
    <el-dialog
      :close-on-click-modal="false"
      title="角色设置"
      width="30%"
      :visible.sync="rolesDialog"
      center
    >
      <div style="border-top:1px solid #E9E9E9;padding-top:30px;">
        <el-row v-loading="rolesDialogLoading">
          <el-col :span="24">
            <div>
              <p class="rolesTitle">选择角色</p>
              <div class="rolesBox">
                <p
                  v-for="(item,index) in rolesList"
                  :key="index"
                  :class="item.isFalse==true?'clickNo':''"
                  @click="selectRoles(index)"
                >
                  <span>{{item.name}}</span>
                  <span v-if="item.isFalse">✔</span>
                </p>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="handleSubmitRoles"
          :disabled="SelectRoles.length == 0"
          :loading="saveRoleBtnLoading"
        >提 交</el-button>
        <el-button @click="rolesDialog = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 新增用户弹框 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="accountTitle"
      width="60%"
      :visible.sync="accountDialog"
      @close="handleClose('formData')"
    >
      <el-form
        label-width="80px"
        label-position="top"
        :model="dialogFormData"
        :rules="formrules"
        ref="formData"
        v-loading="dialogLoading"
      >
        <el-row>
          <el-col :span="8" class="p-1">
            <el-form-item label="用户名" prop="username">
              <el-input
                v-model="dialogFormData.username"
                placeholder="请输入用户名"
                :readonly="isReadonly"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="p-1" v-show="submitType == 0 && !isReadonly">
            <el-form-item label="账户密码" prop="password">
              <el-input
                v-model="dialogFormData.password"
                type="password"
                placeholder="请输入初始化账号密码"
                :readonly="isReadonly"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="p-1" v-show="submitType == 1 && !isReadonly">
            <el-form-item label="重置账户密码" prop="password">
              <el-input
                v-model="dialogFormData.password"
                type="password"
                placeholder="请输入初始化账号密码"
                :readonly="isReadonly"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8" class="p-1">
						<el-form-item label="用户类型" prop="type">
							<el-select style="width:100%" v-model="dialogFormData.type" :disabled="isReadonly">
								<el-option label="PC端用户" value="PC"></el-option>
								<el-option label="微信端用户" value="WX"></el-option>
								<el-option label="APP端用户" value="APP"></el-option>
							</el-select>
						</el-form-item>
          </el-col>-->
          <el-col :span="8" class="p-1">
            <el-form-item label="真实姓名" prop="name">
              <el-input v-model="dialogFormData.name" placeholder="请输入真实姓名" :readonly="isReadonly"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="p-1">
            <el-form-item label="手机号码" prop="mobilePhone">
              <el-input
                v-model="dialogFormData.mobilePhone"
                placeholder="请输入手机号码"
                type="number"
                :readonly="isReadonly"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="p-1">
            <el-form-item label="邮箱地址" prop="email">
              <el-input v-model="dialogFormData.email" placeholder="请输入邮箱地址" :readonly="isReadonly"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="p-1">
            <el-form-item label="出生日期" prop="birthday">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="dialogFormData.birthday"
                value-format="yyyy-MM-dd"
                style="width: 100%;"
                :readonly="isReadonly"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="p-1">
            <!-- 新增 -->
            <el-form-item label="行政等级" prop="regionPermission" v-show="submitType == 0 || isEdite">
              <el-cascader
                v-model="dialogFormData.regionPermission"
                style="width:100%"
                :props="defaultPropsDistrict"
                ref="district"
                @change="handelSelectDistrict"
              ></el-cascader>
            </el-form-item>
            <!-- 编辑 -->
            <el-form-item label="行政等级" v-show="submitType == 1 && !isEdite" prop="regionPermission">
              <el-input v-model="dialogFormData.regionName" :readonly="true" style="width:100%">
                <el-button slot="append" @click="handleChangeEdite" icon="el-icon-edit"></el-button>
              </el-input>
            </el-form-item>
            <!-- 查看 -->
            <el-form-item label="行政等级" v-show="submitType == 2" prop="regionPermission">
              <el-input v-model="dialogFormData.regionName" :readonly="true" style="width:100%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="p-1" v-show="manageRegionVisible">
            <el-form-item label="管理区域" prop="manageRegion">
              <el-select
                v-model="dialogFormData.manageRegion"
                multiple
                style="width:100%"
                :disabled="isReadonly"
              >
                <el-option
                  v-for="item in organizationDistrict"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="p-1">
            <el-form-item label="所属机构" prop="organizationId">
              <el-input
                style="width:100%"
                placeholder="请选择所属机构"
                v-model="dialogFormData.organizationName"
                :readonly="true"
                v-show="isReadonly"
              ></el-input>
              <el-select
                style="width:100%"
                placeholder="可模糊查询"
                v-model="dialogFormData.organizationId"
                remote
                filterable
                :remote-method="bindQueryOrganizations"
                :loading="organization.loading"
                v-show="!isReadonly"
              >
                <el-option
                  v-for="item in organization.list"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="p-1">
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="dialogFormData.sex" :disabled="isReadonly">
                <el-radio-button label="MALE">男</el-radio-button>
                <el-radio-button label="FEMALE">女</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="p-1">
            <el-form-item label="头像" prop="headPhotoId">
              <el-upload
                :action="uploadUrl"
                :headers="headers"
                class="avatar-uploader"
                :show-file-list="false"
                :on-success="handleSuccessHead"
                v-loading="isHeadImgLoading"
                :before-upload="beforeAvatarUpload"
                :disabled="isReadonly"
                accept=".jpg, .jpeg, .png"
              >
                <img v-if="headImageUrl" :src="headImageUrl" class="avatar" />
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="p-1">
            <el-form :model="dialogFormData" :rules="formrules1" ref="formData1">
              <el-form-item label="签名照" prop="signedPhotoId">
                <el-upload
                  :action="uploadUrl"
                  :headers="headers"
                  class="avatar-uploader"
                  :show-file-list="false"
                  :on-success="handleSuccessSign"
                  v-loading="isSignImgLoading"
                  :disabled="isReadonly"
                  :before-upload="beforeSignUpload"
                  accept=".jpg, .jpeg, .png"
                >
                  <img v-if="signImageUrl" :src="signImageUrl" class="avatar" />
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" style="text-align: center;" v-show="!isReadonly">
        <el-button type="primary" @click="handleSubmit('formData')" :loading="submitbtnLoading">提交</el-button>
        <el-button @click="handleReset('formData')" v-show="submitType == 0">重置</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAccountTable,
  accountNewAdd,
  accountEdite,
  accountDelete,
  getAccountRoles,
  saveAccountRoles,
  SaveAccountState,
  getAccountDetail
} from '@/api/project/system/account.js'
import {
  getRolesData,
  getOrganizationDistrict,
  getOrganizationList
} from '@/api/project/system/account.js'
import { getToken } from '@/utils/auth'
import config from '@/config/index.js'
import moment from 'moment'
export default {
  props: {
    queryForm: {
      type: Object,
      default: {
        name: '',
        mobilePhone: '',
        state: ''
      }
    }
  },
  data() {
    return {
      //图片上传地址
      uploadUrl: config.baseUrlImg + '/pc/file/upload',
      headers: {
        authorization: getToken()
      },
      //新增用户
      dialogFormData: {
        username: '',
        password: '',
        name: '',
        mobilePhone: '',
        email: '',
        birthday: '',
        sex: 'MALE',
        headPhotoId: '',
        signedPhotoId: '',
        regionPermission: [],
        regionName: '',
        organizationName: '',
        organizationId: '',
        manageRegion: []
      },
      manageRegionVisible: false,
      //表单验证
      formrules: {
        username: [{ required: true, message: '不能为空！', trigger: 'blur' }],
        password: [
          { required: true, message: '不能为空！', trigger: 'blur' },
          { min: 6, max: 20, message: '限制在6~20位密码！', trigger: 'blur' }
        ],
        email: [{ type: 'email', message: '格式错误！', trigger: 'blur' }],
        mobilePhone: [
          { min: 11, max: 11, message: '手机格式错误！', trigger: 'blur' }
        ],
        sex: [{ required: true, message: '不能为空！', trigger: 'change' }],
        regionPermission: [
          { required: true, message: '请选择！', trigger: 'change' }
        ]
      },
      formrules1: {
        signedPhotoId: [
          { required: true, message: '不能为空！', trigger: 'blur' }
        ]
      },
      //表格加载状态
      isLoadingTable: false,
      dialogLoading: false,
      rolesDialogLoading: false,
      // 表格数据
      tableData: [],
      // 多选操作数据
      multipleSelection: [],
      accountTotal: 0,
      currentPage: 1,
      //角色弹框
      rolesDialog: false,
      //角色列表
      rolesList: [],
      //角色信息
      rolesData: {},
      //已勾选角色
      SelectRoles: [],
      saveRoleBtnLoading: false,
      //权限列表
      adminList: [
        { adminName: '超级管理员', isFalse: false },
        { adminName: '管理员', isFalse: false },
        { adminName: '编辑者', isFalse: false }
      ],
      //用户新增/编辑弹框标题
      accountTitle: '新增PC用户',
      accountDialog: false,
      //头像地址
      headImageUrl: '',
      isHeadImgLoading: false,
      //签名照
      signImageUrl: '',
      isSignImgLoading: false,
      //查看
      isReadonly: false,
      //编辑和新增判断
      submitType: 0, //0:新增；1:编辑；2:查看
      //权限区域
      organizationDistrict: [],
      //机构列表
      organization: {
        list: [],
        loading: false
      },
      defaultPropsDistrict: {
        lazy: true,
        checkStrictly: true,
        lazyLoad(node, resolve) {
          const { level, value } = node
          getOrganizationDistrict({ parentId: value }).then(res => {
            const nodes = res.data.map(item => ({
              value: item.id,
              label: item.name,
              leaf: level >= 3
            }))
            resolve(nodes)
          })
        }
      },
      isEdite: false,
      isFold: false,
      submitbtnLoading: false
    }
  },
  watch: {
    'dialogFormData.regionPermission': function(val) {
      if (val && val.length == 1) {
        this.manageRegionVisible = true
      } else {
        this.manageRegionVisible = false
      }
    }
  },
  created() {
    this.handleInitData()
  },
  methods: {
    //数据初始化
    handleInitData: function() {
      this.handleGetTable()
      this.handleRolesData()
      this.getOrganizationDistrict(1)
    },
    //PC端获取表格数据
    handleGetTable: function(page) {
      this.isLoadingTable = true
      page != undefined ? (this.currentPage = page) : ''
      let params = {
        page: this.currentPage,
        size: 10
      }
      Object.assign(params, this.queryForm)
      getAccountTable(params).then(res => {
        this.tableData = res.data.rows
        this.accountTotal = res.data.total
        this.isLoadingTable = false
      })
    },
    //获取所有角色列表
    handleRolesData: function() {
      let params = {
        page: 1,
        size: 999,
        name: ''
      }
      getRolesData(params).then(res => {
        let datas = res.data.rows
        this.rolesList = datas.map(item => {
          item['isFalse'] = false
          return item
        })
      })
    },
    //新增弹框
    handleNewAddAccount: function() {
      this.accountDialog = true
      this.submitType = 0
      this.accountTitle = '新增PC用户'
    },
    //头像上传前回调
    beforeAvatarUpload: function() {
      this.isHeadImgLoading = true
      return true
    },
    //头像上传成功回调
    handleSuccessHead: function(res, file, fileList) {
      this.headImageUrl = config.baseUrlImg + file.response.data.filePath
      this.dialogFormData['headPhotoId'] = res.data.id
      this.isHeadImgLoading = false
    },
    //签名照上传前回调
    beforeSignUpload: function() {
      this.isSignImgLoading = true
      return true
    },
    //签名照上传成功后回调
    handleSuccessSign: function(res, file, fileList) {
      this.signImageUrl = config.baseUrlImg + file.response.data.filePath
      this.dialogFormData['signedPhotoId'] = res.data.id
      this.$refs['formData1'].validate()
      this.isSignImgLoading = false
    },
    //新增/编辑提交按钮
    handleSubmit: function(formName) {
      var that = this
      let isTrue1 = false
      let isTrue2 = false
      this.$refs['formData'].validate(valid => {
        isTrue1 = Boolean(valid)
      })
      this.$refs['formData1'].validate(valid => {
        isTrue2 = Boolean(valid)
      })
      if (isTrue1 && isTrue2) {
        this.submitbtnLoading = true
        if (that.submitType == 0) {
          let params = JSON.parse(JSON.stringify(that.dialogFormData))
          params['manageRegion'] = params['manageRegion'].join(',')
          accountNewAdd(params).then(res => {
            this.accountDialog = false
            this.submitbtnLoading = false
            this.$message.success('提交成功！')
            this.handleGetTable(1)
          })
        } else {
          let params = JSON.parse(JSON.stringify(that.dialogFormData))
          params['manageRegion'] = params['manageRegion'].join(',')
          accountEdite(params).then(res => {
            this.accountDialog = false
            this.submitbtnLoading = false
            this.$message.success('提交成功！')
            this.handleGetTable(1)
          })
        }
      }
    },
    //弹框重置按钮
    handleReset: function(formName) {
      this.$refs[formName].resetFields()
      this.signImageUrl = ''
      this.headImageUrl = ''
    },
    //查看用户
    handleViewAccount: async function(row) {
      this.accountTitle = '查看用户'
      this.submitType = 2
      this.dialogLoading = true
      this.accountDialog = true
      await this.getAccountDetail(row.userId).then(res => {
        let obj = Object.assign({}, res)
        var { name: city, id: cityId } = obj.city ? obj.city : {}
        var { name: district, id: districtId } = obj.district
          ? obj.district
          : {}
        var { name: town, id: townId } = obj.town ? obj.town : {}
        var { name: village, id: villageId } = obj.village ? obj.village : {}
        obj['regionName'] = [city, district, town, village]
          .filter(item => {
            return Boolean(item)
          })
          .join('/')
        obj['regionPermission'] = [
          cityId,
          districtId,
          townId,
          villageId
        ].filter(item => {
          return Boolean(item)
        })
        obj['organizationName'] = obj.organization ? obj.organization.name : ''
        obj['manageRegion'] = obj.manageRegionList
          ? obj.manageRegionList.map(item => {
              return item.id
            })
          : []
        this.dialogFormData = obj
        this.isReadonly = true
        this.dialogLoading = false
      })
    },
    //编辑用户
    handleEditeAccount: async function(row) {
      this.accountTitle = '编辑用户'
      this.submitType = 1
      this.dialogLoading = true
      this.accountDialog = true
      delete this.formrules['password']
      await this.getAccountDetail(row.userId).then(res => {
        let obj = Object.assign({}, res)
        obj['headPhotoId'] = obj['headPhotoDto'] ? obj['headPhotoDto'].id : ''
        obj['signedPhotoId'] = obj['signedPhotoDto']
          ? obj['signedPhotoDto'].id
          : ''
        obj['password'] = ''
        var { name: city, id: cityId } = obj.city ? obj.city : {}
        var { name: district, id: districtId } = obj.district
          ? obj.district
          : {}
        var { name: town, id: townId } = obj.town ? obj.town : {}
        var { name: village, id: villageId } = obj.village ? obj.village : {}
        obj['regionName'] = [city, district, town, village]
          .filter(item => {
            return Boolean(item)
          })
          .join('/')
        obj['regionPermission'] = [
          cityId,
          districtId,
          townId,
          villageId
        ].filter(item => {
          return Boolean(item)
        })
        obj['manageRegion'] = obj.manageRegionList
          ? obj.manageRegionList.map(item => {
              return item.id
            })
          : []
        this.dialogFormData = obj
        this.dialogLoading = false
      })
    },
    //单条启用用户
    handleStartAccount: function(row) {
      this.$confirm('此操作将启用此账户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res => {
        let params = {
          ids: row.userId,
          state: row.state == 'ENABLED' ? 'DISABLED' : 'ENABLED'
        }
        SaveAccountState(params).then(res => {
          this.$message.success('操作成功！')
          this.handleGetTable()
        })
      })
    },
    //单条禁用用户
    handleStopAccount: function(row) {
      this.$confirm('此操作将停用此账户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res => {
        let params = {
          ids: row.userId,
          state: row.state == 'ENABLED' ? 'DISABLED' : 'ENABLED'
        }
        SaveAccountState(params).then(res => {
          this.$message.success('操作成功！')
          this.handleGetTable()
        })
      })
    },
    //单条删除用户
    handleDeleteAccount: function(row) {
      this.$confirm('此操作将永久删除此用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res => {
        let userId = row.userId
        accountDelete({ ids: userId }).then(res => {
          this.$message.success('操作成功！')
          this.handleGetTable()
        })
      })
    },
    //角色按钮弹框
    handleRoleSelect: function(row) {
      this.rolesData = row
      this.rolesDialog = true
      this.rolesDialogLoading = true
      getAccountRoles({ userId: row.userId }).then(res => {
        this.rolesList.forEach((itemOut, index, arr) => {
          itemOut.isFalse = false
          res.data.forEach(itemIn => {
            if (itemOut.id == itemIn.id) {
              itemOut.isFalse = true
            }
          })
        })
        this.SelectRoles = this.rolesList.filter(item => {
          return item.isFalse
        })
        this.rolesDialogLoading = false
      })
    },
    //角色赋予
    selectRoles: function(i) {
      this.rolesList.forEach((item, index) => {
        if (index == i) {
          item.isFalse = !item.isFalse
        } else {
          item.isFalse = false
        }
      })
      this.SelectRoles = this.rolesList.filter(item => {
        return item.isFalse
      })
    },
    //提交角色赋予
    handleSubmitRoles: function() {
      let roleIds = this.SelectRoles.map(item => {
        return item.id
      })
      let params = {
        userId: this.rolesData.userId,
        roleIdList: roleIds
      }
      this.saveRoleBtnLoading = true
      saveAccountRoles(params).then(res => {
        this.$message.success('操作成功！')
        this.saveRoleBtnLoading = false
        this.rolesDialog = false
      })
    },
    //查看角色详情
    getAccountDetail: function(id) {
      return new Promise((resolve, reject) => {
        getAccountDetail({ id }).then(res => {
          this.headImageUrl = res.data.headPhoto
            ? config.baseUrlImg + res.data.headPhoto
            : ''
          this.signImageUrl = res.data.signedPhoto
            ? config.baseUrlImg + res.data.signedPhoto
            : ''
          let organizationName = res.data.organization
            ? res.data.organization.name
            : ''
          this.bindQueryOrganizations(organizationName)
          res.data.organizationId = res.data.organization
            ? res.data.organization.id
            : ''
          resolve(res.data)
        })
      })
    },
    //表格数据勾选回调
    handleSelectionChange: function(val) {
      this.$emit('bindMultipleSelection', val)
    },
    handleSizeChange: function(val) {},
    handleCurrentChange: function(val) {
      this.handleGetTable(val)
    },
    handleClose: function(formName) {
      this.dialogFormData = {
        username: '',
        password: '',
        name: '',
        mobilePhone: '',
        email: '',
        birthday: '',
        sex: 'MALE',
        headPhotoId: '',
        signedPhotoId: '',
        manageRegion: []
      }
      this.signImageUrl = ''
      this.headImageUrl = ''
      this.isReadonly = false
      this.$refs[formName].resetFields()
      this.$refs['formData1'].resetFields()
      this.isEdite = false
    },
    //获取组织区域列表
    getOrganizationDistrict: function(id) {
      getOrganizationDistrict({ parentId: id }).then(res => {
        this.organizationDistrict = res.data
      })
    },
    //区域权限修改
    handleChangeEdite: function() {
      this.isEdite = true
    },
    //区域选择回调
    handelSelectDistrict: function(val) {
      this.dialogFormData['cityId'] = ''
      this.dialogFormData['districtId'] = ''
      this.dialogFormData['townId'] = ''
      this.dialogFormData['villageId'] = ''
      if (val) {
        val[0] && (this.dialogFormData['cityId'] = val[0])
        val[1] && (this.dialogFormData['districtId'] = val[1])
        val[2] && (this.dialogFormData['townId'] = val[2])
        val[3] && (this.dialogFormData['villageId'] = val[3])
      }
    },
    //机构列表模糊查询
    bindQueryOrganizations: function(name) {
      if (name) {
        let params = {
          name: name
        }
        this.organization['loading'] = true
        getOrganizationList(params).then(res => {
          this.organization['list'] = res.data
          this.organization['loading'] = false
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.can-container {
  padding: 20px;
  background: #fff;
  .title {
    font-size: 24px;
    font-weight: 500;
    color: rgba(72, 73, 77, 1);
    line-height: 33px;
  }
}

.btnsearch {
  background: #969799;
  color: white;
}

.btnReset {
  background: white;
  color: #969799;
}
.userList {
  margin: 30px 0px;
}
.btnuser {
  border: 1px solid #2e8ae6;
  color: #2e8ae6;
}
.pages {
  text-align: center;
  margin: 20px auto;
}
.rolesTitle {
  font-size: 14px;
  color: #333333;
}
.rolesBox {
  width: 100%;
  height: 308px;
  overflow: auto;
  background: #f8f8f8;
  border-radius: 4px;
  padding: 5px 15px;
}
.rolesBox p {
  padding: 5px;
  font-size: 12px;
  color: #333;
  display: flex;
  justify-content: space-between;
}
.rolesBox p.clickNo {
  color: #2e8ae6;
  cursor: pointer;
}
.rolesBox p:hover {
  color: #2e8ae6;
  cursor: pointer;
}
.p-1 {
  padding: 0 10px;
}
</style>

<style lang="scss" scoped>
.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 120px;
  height: 120px;
  line-height: 120px;
}
.avatar-uploader /deep/ .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>
